<template>
  <div class="todoapp">
    <div id="box1" ref="box11" @click="test">今晚的月儿真圆呀~~{{ age }}岁</div>
    <!-- 头部组件 -->
    <TodoHeader ref="head1" :list="todoList" />
    <!-- 中间列表组件 -->
    <TodoMain :list="getTypedList()" :age="age" />
    <!-- 底部组件 -->
    <TodoFooter
      :list="todoList"
      @onChangeType="changeListType"
      @onClear="clear"
    />
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  name: "App",
  props: {},
  data() {
    return {
      age: 12,
      // 当前列表的类型（0-全部 1-未完成 2-已完成）
      listType: 0,
      // todo列表
      todoList: this.getInitData(),
    };
  },
  beforeCreate() {
    console.log("讨厌~~----------------------");
  },
  created() {
    console.log("死鬼~！---------------------");
  },
  beforeMount() {
    console.log("beforeMount---------------------");
    console.log(this.$refs.box11); // undefined
  },
  updated() {
    console.log("updated->", this.$refs.box11.innerHTML);
  },
  mounted() {
    console.log("mounted---------------------");
    console.log(this.$refs.box11); // div dom
  },
  methods: {
    test() {
      this.age += 100;
      console.log("test->", this.$refs.box11.innerHTML);

      this.$nextTick(() => {
        console.log("nextTick->", this.$refs.box11.innerHTML);
      });
      // const a = document.querySelector('#box1')
      // console.log(a)
      // const b = this.$refs.box11;
      // console.log(b);
      // console.log(this.$refs.head1);
      // console.log(this);
    },
    // 0.获取 初始化数据---------------------------
    getInitData() {
      // a.读取本地数据
      let strJSON = localStorage.getItem("todo18");
      strJSON && (strJSON = JSON.parse(strJSON));
      console.log(strJSON);
      // b.返回数据
      return (
        strJSON || [
          { id: 100, name: "吃饭", isDone: false },
          { id: 201, name: "睡觉", isDone: true },
          { id: 103, name: "打豆豆", isDone: false },
        ]
      );
    },
    // 1.修改 listType ----------------------------
    changeListType(type) {
      this.listType = type;
    },
    // 2.清除已完成任务 ---------------------------
    clear() {
      this.todoList = this.todoList.filter((e) => !e.isDone);
    },
    // 3. 根据条件返回 筛选后的数组 ----------------
    getTypedList() {
      console.log(this.listType);
      // 返回 未完成 任务列表
      if (this.listType === 1) {
        return this.todoList.filter((e) => !e.isDone);
      }
      // 返回 已完成 任务列表
      else if (this.listType === 2) {
        return this.todoList.filter((e) => e.isDone);
      }
      // 返回 所有任务列表
      return this.todoList;
    },
  },
  computed: {},
  watch: {
    // 侦听器：数组变化后 更新到本地保存
    todoList: {
      deep: true, // 深度监听：会监听对象和数组中的成员
      immediate: true, // 立即执行：组件加载后立即执行一次
      handler() {
        // 侦听处理函数
        localStorage.setItem("todo18", JSON.stringify(this.todoList));
      },
    },
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
};
</script>

<style lang="less" scoped>
</style>
